<template>
  <view class="page flex-col">
    <image
      class="image_2"
      referrerpolicy="no-referrer"
      :src="constants.thumb_url"
    />
    <view class="section_2 flex-col">
      <view class="text-wrapper_2 flex-col">
        <text class="text_4">
          {{ constants.name }}
        </text>
      </view>
      <view class="text-wrapper_10 flex-row justify-between">
        <text class="text_5">良益科技</text>
        <text class="text_7"
          ><text class="text_6">#</text
          >{{ constants.experiment_category_name }}</text
        >
      </view>
    </view>
    <view class="section_3 flex-col">
      <view class="group_1 flex-col">
        <view class="text-wrapper_11 flex-row justify-between">
          <text
            class="text_8 tab"
            :class="{ 'tab-active': activeIndex == 0 }"
            @click="handleTab(0)"
            >实验目的</text
          >
          <text
            class="text_9 tab"
            :class="{ 'tab-active': activeIndex == 1 }"
            @click="handleTab(1)"
            >实验原理</text
          >
          <text
            class="text_10 tab"
            :class="{ 'tab-active': activeIndex == 2 }"
            @click="handleTab(2)"
            >实验步骤</text
          >
          <text
            class="text_11 tab"
            :class="{ 'tab-active': activeIndex == 3 }"
            @click="handleTab(3)"
            >注意事项</text
          >
          <text
            class="text_12 tab"
            :class="{ 'tab-active': activeIndex == 4 }"
            @click="handleTab(4)"
            >实验报告</text
          >
        </view>
        <view class="block_1 flex-row">
          <!-- <view class="section_4 flex-col"></view> -->
        </view>
      </view>
      <view class="content-wrap" v-if="!showReport">
        <text
          class="text_14"
          v-if="activeIndex == 0"
          v-html="constants.objective"
        ></text>
        <text
          class="text_14"
          v-if="activeIndex == 1"
          v-html="constants.principle"
        ></text>
        <text
          class="text_14"
          v-if="activeIndex == 2"
          v-html="constants.steps"
        ></text>
        <text
          class="text_14"
          v-if="activeIndex == 3"
          v-html="constants.notice"
        ></text>
      </view>
      <view class="list_3 flex-col" v-else>
        <view
          class="list-items_1 flex-row justify-between"
          v-for="(item, index) in experiment_report_files"
          @click="gotoReportDetail(item)"
          :key="index"
        >
          <view class="image-text_5 flex-row justify-between">
            <image
              class="label_1"
              referrerpolicy="no-referrer"
              src="./imgs/file-icon.png"
            />
            <view class="text-group_4 flex-col">
              <text class="text_13">{{ item.source_name }}</text>
              <text class="text_144">{{ item.updated }}</text>
            </view>
          </view>
          <image
            class="thumbnail_5"
            referrerpolicy="no-referrer"
            src="./imgs/right.png"
          />
        </view>
      </view>
    </view>
    <view class="section_5 flex-col">
      <view class="group_10 flex-row justify-between">
        <view class="group_4 flex-row">
          <view class="image-text_3 flex-row justify-between" @click="goBack">
            <image
              class="thumbnail_13"
              referrerpolicy="no-referrer"
              src="./imgs/back.png"
            />
            <text class="text-group_1">返回</text>
          </view>
        </view>
        <view class="text-wrapper_5 flex-col" @click="gotoExperiment">
          <text class="text_17">开始练习</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      constants: {},
      activeIndex: 0,
      showReport: false,
      experiment_id: "",
      experiment_report_files: [],
    };
  },
  async onLoad(option) {
    this.experiment_id = option.experiment_id;
    this.handleGetDetail();
  },
  methods: {
    async handleGetDetail() {
      let param = {
        experiment_id: this.experiment_id,
      };
      let res = await this.API.ExperimentFetchModel(param);
      console.log("rrrrrr", res);
      this.constants = res;
      // objective: res.objective,
      // principle: res.principle,
      // steps: res.steps,
      // notice: res.notice,
      // report_files: res.report_files,
    },
    async handleGetExperimentReportFiles() {
      let param = {
        experiment_id: this.experiment_id,
      };
      let res = await this.API.ReportsForMeOfStudent(param);
      console.log("rrrrrr2222", res);
      this.experiment_report_files = res;
    },
    handleTab(index) {
      this.activeIndex = index;
      if (index == 4) {
        this.showReport = true;
        this.handleGetExperimentReportFiles();
      } else {
        this.showReport = false;
      }
    },
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    gotoReportDetail(item) {
      uni.navigateTo({
        url: `/pages/index/reportDetail?report_id=${item.report_id}`,
      });
    },
    gotoExperiment() {
      console.log(this.constants);
      let code = "";
      if (this.constants.experiment_category_id == 1) {
        code = "Optics_T01_001";
        //code="Optics_T03_001"
      } else if (this.constants.experiment_category_id == 2) {
        code = "Optics_T02_001";
      } else if (this.constants.experiment_category_id == 3) {
        code = "Optics_T03_001";
      }
      uni.navigateTo({
        url: `/pages/index/experiment?id=${this.experiment_id}&code=${code}&type=${this.constants.experiment_category_id}`,
      });
    },
  },
};
</script>
<style scoped lang="less">
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  .image_2 {
    width: 750rpx;
    height: 482rpx;
  }
  .section_2 {
    background-color: rgba(255, 255, 255, 1);
    padding: 24rpx 32rpx 24rpx 32rpx;
    .text-wrapper_2 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      padding-bottom: 24rpx;
      .text_4 {
        width: 686rpx;
        height: 88rpx;
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 32rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        line-height: 44rpx;
      }
    }
    .text-wrapper_10 {
      margin-top: 24rpx;
      .text_5 {
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 24rpx;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 32rpx;
      }

      .text_7 {
        overflow-wrap: break-word;
        color: rgba(140, 140, 140, 1);
        font-size: 24rpx;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 32rpx;
        margin-left: 8rpx;
        .text_6 {
          overflow-wrap: break-word;
          color: rgba(255, 112, 36, 1);
          font-size: 24rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 32rpx;
          margin-right: 5rpx;
        }
      }
    }
  }
  .section_3 {
    background-color: rgba(255, 255, 255, 1);
    margin-top: 16rpx;
    padding: 0 32rpx 32rpx 32rpx;
    .group_1 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      padding-top: 26rpx;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .text-wrapper_11 {
        width: 718rpx;
        margin-right: -32rpx;
        .tab {
          overflow-wrap: break-word;
          color: rgba(89, 89, 89, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
          position: relative;
        }
        .tab-active {
          color: rgba(39, 118, 255, 1);
        }
        .tab-active:before {
          content: "";
          position: absolute;
          bottom: -20%;
          left: calc(50% - 20rpx);
          width: 40rpx;
          height: 6rpx;
          border-radius: 3rpx;
          background: rgba(39, 118, 255, 1);
        }
      }
      .block_1 {
        margin: 16rpx 590rpx 0 16rpx;
        .section_4 {
          background-color: rgba(39, 118, 255, 1);
          border-radius: 4px 4px 0px 0px;
          width: 80rpx;
          height: 6rpx;
        }
      }
    }
    .content-wrap {
      //flex: 1;
      margin-top: 32rpx;
      height: 468rpx;
      overflow-y: scroll;
      .text_13 {
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 28rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 40rpx;
        margin: 32rpx 574rpx 0 0;
      }
      .text_14 {
        width: 686rpx;
        height: 600rpx;
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 28rpx;
        font-weight: normal;
        text-align: justify;
        line-height: 40rpx;
        margin-top: 16rpx;
      }
    }

    .list_3 {
      height: 468rpx;
      overflow-y: auto;
      overflow-x: hidden;
      margin-top: 32rpx;
    }

    .list-items_1 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 8px;
      width: 686rpx;
      border: 1px solid rgba(230, 235, 241, 1);
      margin-bottom: 24rpx;
      padding: 22rpx 22rpx 22rpx 22rpx;
    }

    .image-text_5 {
      width: 510rpx;
    }

    .label_1 {
      width: 92rpx;
      height: 92rpx;
    }

    .text-group_4 {
      margin: 4rpx 0 4rpx 0;
    }

    .text_13 {
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 28rpx;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
      line-height: 40rpx;
      margin-right: 226rpx;
    }

    .text_144 {
      overflow-wrap: break-word;
      color: rgba(102, 102, 102, 1);
      font-size: 28rpx;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 40rpx;
      margin-top: 4rpx;
      height: 40rpx;
    }

    .thumbnail_5 {
      width: 40rpx;
      height: 40rpx;
      margin: 26rpx 0 26rpx 0;
      border-radius: 20rpx;
      border: 2rpx solid #e6ebf1;
    }
    .group_2 {
      background-color: rgba(234, 234, 234, 1);
      width: 686rpx;
      height: 306rpx;
      margin-top: 32rpx;
    }
    .text_15 {
      overflow-wrap: break-word;
      color: rgba(89, 89, 89, 1);
      font-size: 24rpx;
      font-weight: normal;
      text-align: justify;
      white-space: nowrap;
      line-height: 32rpx;
      margin: 16rpx 614rpx 0 0;
    }
    .text_16 {
      width: 686rpx;
      height: 600rpx;
      overflow-wrap: break-word;
      color: rgba(38, 38, 38, 1);
      font-size: 28rpx;
      font-weight: normal;
      text-align: justify;
      line-height: 40rpx;
      margin-top: 32rpx;
    }
  }
  .section_5 {
    background-color: rgba(255, 255, 255, 1);
    margin-top: 24rpx;
    padding: 26rpx 32rpx 18rpx 32rpx;
    position: fixed;
    bottom: 0;
    .group_10 {
      width: 686rpx;
      .group_4 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 6px;
        border: 1px solid rgba(230, 235, 241, 1);
        padding: 20rpx 22rpx 20rpx 22rpx;
        .image-text_3 {
          width: 116rpx;
          .thumbnail_13 {
            width: 40rpx;
            height: 40rpx;
            margin: 4rpx 0 4rpx 0;
          }
          .text-group_1 {
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 34rpx;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            line-height: 48rpx;
          }
        }
      }
      .text-wrapper_5 {
        background-color: rgba(39, 118, 255, 1);
        border-radius: 6px;
        padding: 24rpx 176rpx 20rpx 178rpx;
        .text_17 {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 34rpx;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: right;
          white-space: nowrap;
          line-height: 48rpx;
        }
      }
    }
  }
}
</style>
